---
import { getCollection, render } from "astro:content";
import Layout from "../../layouts/Layout.astro";

export async function getStaticPaths() {
	const projects = await getCollection("projects");
	return projects.map((project) => ({
		params: { slug: project.id },
		props: { project },
	}));
}

const { project } = Astro.props;
const { Content } = await render(project);
---

<Layout>
	<Fragment slot="left">
		<header class="page-head">
			<img
				src="/kittens.webp"
				alt="two small orange & white kittens huddled together on a white surface. there is white text overlay over each of the kittens, the first reads 'you are made of stardust', the last reads 'and i am made of dirt'. there is a date stamp in the bottom right corner, it says '04.04.2008'."
			/>
			<div class="title">
				<h1 class="name">{project.data.name}</h1>
			</div>
			<p class="subtitle">
				{project.data.description}
			</p>
		</header>
	</Fragment>

	<Fragment slot="right">
		<article>
			<Content />
		</article>
	</Fragment>
</Layout>

<style is:global>
	.content {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		color: hsl(var(--text));

		p {
			line-height: 1.6;
			color: hsl(var(--subtext1));
		}

		strong {
			font-weight: 700;
			color: hsl(var(--text));
		}

		a:not(.link) {
			color: hsl(var(--accent));
			text-decoration: underline;
			text-decoration-color: hsla(var(--accent) / 0.4);
			text-underline-offset: 3px;
			font-weight: 600;
			border-radius: 0.2rem;

			padding: 0;
			background: transparent;

			&:hover,
			&:focus-visible {
				color: hsl(var(--blue));
				text-decoration-color: hsl(var(--blue));
				background: transparent;
			}
		}

		/* Markdown Blockquotes */
		blockquote {
			position: relative;

			padding: 0.5rem 1rem;
			background-color: hsl(var(--surface1) / 1);
			color: hsl(var(--subtext1));
			font-style: italic;
			overflow: hidden;
			border-radius: 0.25rem;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 0.5ch;
				height: 100%;
				background-color: hsl(var(--accent));
			}
		}

		/* Lists */
		ul,
		ol {
			padding-left: 1.25rem;
			display: flex;
			flex-direction: column;
			gap: 0.25rem;

			li::marker {
				color: hsl(var(--accent));
			}
		}
	}

	/* --- Inline Code (`code`) --- */
	:not(pre) > code {
		font-family:
			"JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo,
			Monaco, Consolas, monospace;
		font-size: 0.85em;
		padding: 0.15em 0.4em;
		border-radius: 0.375rem;
		color: hsl(var(--purple));
		border: 1px solid hsl(var(--surface2) / 0.4);
		white-space: break-spaces;
		word-break: break-word;
	}

	/* --- Code Blocks (`pre` / Shiki output) --- */
	pre,
	pre.astro-code {
		position: relative;
		margin: 0.5rem 0;
		padding: 0.5rem;
		border-radius: 0.75rem;
		border: 1px solid hsl(var(--surface1));
		overflow-x: auto;

		font-family:
			"JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo,
			Monaco, Consolas, monospace;
		font-size: 0.875rem;
		line-height: 1.6;
		tab-size: 2;

		scrollbar-width: thin;
		scrollbar-color: hsla(var(--overlay1) / 0.6) transparent;

		&::-webkit-scrollbar {
			height: 6px;
		}
		&::-webkit-scrollbar-thumb {
			background: hsla(var(--overlay1) / 0.6);
			border-radius: 3px;
		}

		code {
			font-family: inherit;
			font-size: inherit;
			background: transparent;
			padding: 0;
			border: none;
			color: hsl(var(--text));
		}
	}

	pre[data-language]::before {
		content: attr(data-language);
		position: absolute;
		top: 0.5rem;
		right: 0.75rem;
		font-size: 0.7rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: hsl(var(--overlay1));
		user-select: none;
		pointer-events: none;
	}
</style>